$name: #{'.' + $namespace + '-button'};

@mixin getKeys($type) {
  $keys: text background border shadow stroke;

  @each $item in $keys {
    $key: #{$item}-color;
    --button-#{$key}: var(--#{$type}-#{$key});
  }
}

@each $item in $types {
  #{$name}--#{$item} {
    @include getKeys($item);
  }
}

#{$name} {
  --button-border-width: 2rpx;
  all: initial;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: var(--button-text-color);
  border-radius: 16rpx;
  padding: 16rpx 32rpx;

  &::before,
  &::after {
    content: none;
  }

  @mixin fillUp() {
    border-radius: inherit;
    position: absolute;
    @include locate();
  }

  &__background {
    @include fillUp();
    background: var(--button-background-color);
  }

  &__border {
    @include fillUp();
    @include gradientBorder();
    --border-color: var(--button-border-color);
    border-width: var(--button-border-width);
  }

  &__shadow {
    @include fillUp();
    border: var(--button-border-width) solid transparent;
    @include boxShadow();
    --shadow-x: 0;
    --shadow-y: 6rpx;
    --shadow-color: var(--button-shadow-color);
  }

  &__loading {
    margin-right: 16rpx;
    position: relative;
  }

  &__content {
    position: relative;
  }

  &.is-link {
    padding: 0;

    #{$name} {

      &__background,
      &__border,
      &__shadow {
        display: none;
      }
    }
  }

  &.is-icon {
    width: fit-content;
    padding: 32rpx;
    border-radius: 50%;

    &.is-loading {
      #{$name}__loading {
        margin-right: 0;
      }

      #{$name}__content {
        display: none;
      }
    }
  }

  &.is-loading {
    &::before {
      content: none;
    }
  }
}

button[disabled].is-disabled {
  @include getKeys(disabled);
  pointer-events: none;
  background: transparent;
  color: var(--button-text-color);
}